<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Document</title>
    <link href="//at.alicdn.com/t/c/font_4951836_6xj6c6j6dee.css" rel="stylesheet">
    <style>
        .box {
            width: 300px;
            height: 100px;
            margin: 50px auto;
        }

        .icon {
            float: left;
            font-family: "iconfont", serif;
            font-style: normal;
            font-size: 2em;
            margin: 0 0;
        }

        .yellow {
            color: #efe53b;
        }

        p {
            margin-left: 50px;
            line-height: 30px;
            font-size: 1.5em;
        }

    </style>
</head>
<body>

<div class="box">
    <span class="icon icon-xingxing"></span>
    <span class="icon icon-xingxing"></span>
    <span class="icon icon-xingxing"></span>
    <span class="icon icon-xingxing"></span>
    <span class="icon icon-xingxing"></span>
    <p>满意</p>
</div>


</body>

<script>
    let p = document.querySelector('p');
    let box = document.querySelector(".box")
    let words = ["较差", "一般", "良好", "满意", "非常满意"]
    box.addEventListener("mouseover", function (e) {

        if (e.target.tagName === 'SPAN') {
            let pre = e.target
            //处理之前的元素
            while (pre) {
                pre.classList.add('yellow')
                pre = pre.previousElementSibling
            }
            //处理之后的元素
            let next = e.target.nextElementSibling
            while (next) {
                next.classList.remove('yellow')
                next = next.nextElementSibling
            }
            //处理文字

            let index = Array.from(e.target.parentElement.children).indexOf(e.target)

            p.innerHTML = words[index]

        }
    })


</script>
</html>
